import { IFormState } from "./types.ts";
import { ITableCHandle, ITableColumn } from "@/utils/types/table.ts";
import { computed, reactive, ref, watch } from "vue";
import { FormOption } from "@/components/autoForm/types/componentTypes.ts";
import { validatePhone } from "@/utils/validate.ts";

export const serchOptions = [
  { label: "用户名称", value: "userName", type: "input" },
  { label: "手机号码", value: "phonenumber", type: "input" },
  { label: "起止时间", value: "create", type: "timeRange" },
];

export const columns: ITableColumn[] = [
  {
    title: "用户编号",
    dataIndex: "userId",
    key: "userId",
  },
  {
    title: "用户名称",
    dataIndex: "userName",
    key: "userName",
  },
  {
    title: "所属部门",
    dataIndex: "deptName",
    key: "deptName",
  },
  {
    title: "联系电话",
    dataIndex: "phonenumber",
    key: "phonenumber",
  },
  {
    title: "状态",
    dataIndex: "statusName",
    key: "statusName",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    fixed: "right",
    handle: [
      {
        title: "重置密码",
        hasPermi: ["system:user:resetPwd"],
        normal: true, // 正常显示
        funp: ["handleResetPwd", ""], // [操作方法，新增或编辑]
      },
      {
        title: "修改",
        hasPermi: ["system:user:edit"],
        normal: true, // 正常显示
        funp: ["handleAdd", "update"], // [操作方法，新增或编辑]
      },
      {
        title: "删除",
        hasPermi: ["system:user:remove"],
        normal: true, // 正常显示
        funp: ["handleDelete", "/system/user"], // [操作方法，新增或编辑]
      },
    ] as ITableCHandle[],
  },
];

const pwdHide = ref<boolean>(false);
export const addOptions = computed<FormOption<IFormState>[]>(() => {
  const o: FormOption<IFormState>[] = [
    {
      label: "用户名称",
      field: "userName",
      type: "input",
      rules: [{ required: true, message: "请输入用户姓名" }],
    },
    {
      label: "归属部门",
      field: "deptId",
      type: "custom",
      rules: [{ required: true, message: "请选择归属部门" }],
    },
    {
      label: "手机号码",
      field: "phonenumber",
      type: "input",
      rules: [
        { required: true, message: "请输入手机号码" },
        { validator: validatePhone },
      ],
    },
    {
      label: "角色名称",
      field: "roleIds",
      type: "loadSelect",
      props: {
        mode: "multiple",
        url: "/system/role/list",
        handle: data => {
          return {
            value: data.roleId,
            label: data.roleName,
          };
        },
      },
      rules: [{ required: true, message: "请选择角色" }],
    },
    {
      label: "用户密码",
      field: "password",
      type: "input",
      hide: pwdHide.value,
      rules: [{ required: true, message: "请输入用户密码" }],
    },
    {
      label: "用户状态",
      field: "status",
      type: "radio",
      props: {
        options: [
          { label: "正常", value: "0" },
          { label: "停用", value: "1" },
        ],
      },
    },
    {
      label: "备注",
      field: "remark",
      type: "input",
    },
  ];
  return o;
});

export const initFormData: Partial<IFormState> = {
  userName: "",
  deptId: null,
  phonenumber: "",
  roleIds: [],
  password: "",
  status: "0",
  remark: "",
  userId: null,
};

export const formState = reactive<IFormState>(
  JSON.parse(JSON.stringify(initFormData)),
);

watch(
  () => formState.userId!,
  (val: number) => {
    if (val) {
      pwdHide.value = true;
    } else {
      pwdHide.value = false;
    }
  },
);
